<template>
    <div>

        <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <item :item="menuList"></item>
        </el-menu>

        <!-- <item :item="item" v-for="(item,index) in menuList" :key="index"></item>  -->

        <!-- <ul>
          <li v-for="(item,index) in menuList" :key="index">
              {{item.name}}
              <ul>
                  <li v-for="(m,j) in item.children" :key="j">
                      &nbsp; &nbsp;{{m.name}}
                     <ul>
                         <li v-for="(n,t) in m.children" :key="t">&nbsp; &nbsp;&nbsp; &nbsp;{{n.name}}</li>
                    </ul>      
                </li>
              </ul>
        </li>
      </ul> -->
    </div>
</template>

<script>
import Item from "../components/Item.vue";
export default {
  name: "",
  data() {
    return {
      menuList: [
        {
          name: "IT互联网",
          type: 1,
          children: [
            {
              name: "编程语言",
              type: 1,
              children: [
                {
                  name: "java",
                  type: 1,
                  children: [
                    {
                      name: "jsp",
                      type: 1,
                      children: [
                        { name: "123", type: 2 },
                        { name: "456", type: 2 }
                      ]
                    }
                  ]
                },
                {
                  name: "python"
                },
                {
                  name: "web"
                },
                {
                  name: "php"
                }
              ]
            },
            {
              name: "前端开发",
              type: 2
            },
            {
              name: "移动开发",
              type: 1,
              children: [
                {
                  type: 2,
                  name: "html5"
                },
                {
                  type: 2,
                  name: "andro"
                },
                {
                  type: 2,
                  name: "ios"
                }
              ]
            },
            {
              name: "游戏开发",
              type: 2
            }
          ]
        },
        {
          name: "设计创作",
          type: 1,
          children: [
            {
              type: 2,
              name: "平面设计"
            },
            {
              type: 2,
              name: "UI设计"
            },
            {
              type: 2,
              name: "软件设计"
            }
          ]
        },
        {
          name: "升学考研",
          type: 1,
          children: [
            {
              type: 2,
              name: "考验"
            },
            {
              type: 2,
              name: "大学"
            },
            {
              type: 2,
              name: "高中"
            },
            {
              type: 2,
              name: "初中"
            }
          ]
        },
        {
          name: "职企考证",
          type: 1,
          children: [
            {
              type: 2,
              name: "公务员"
            }
          ]
        }
      ]
    };
  },
  components: { Item }
};
</script>

<style scoped>
.el-menu-vertical-demo {
  width: 220px;
}
</style>
